<div class="container flex flex-wrap justify-between">
  <div class="light-mode mx-8 my-4 h-full bg-primary flex flex-col justify-between px-6 py-12 rounded overflow-hidden">
    <div>
      <i class="fab fa-codepen mb-8 ml-3 text-secondary-darkest text-2xl cursor-pointer"></i>
      <div class="input-group">
        <div class="btn">
          <i class="icon fas fa-search"></i>
        </div>
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <ul class="menu mt-6">
        <li class="menu-item active"><i class="icon fas fa-user mr-5"></i>People</li>
        <li class="menu-item"><i class="icon fas fa-star mr-5"></i>Favourites</li>
        <li class="menu-item"><i class="icon fas fa-check-square mr-5"></i>Todos</li>
        <li class="menu-item"><i class="icon fas fa-compass mr-5"></i>Explore</li>
        <li class="divider"></li>
        <li class="menu-item"><i class="icon fas fa-image mr-5"></i>Images</li>
        <li class="menu-item"><i class="icon fas fa-bell mr-5"></i>Notification</li>
      </ul>
    </div>
    <div class="flex justify-between items-center">
      <div class="flex items-center cursor-pointer">
        <img
          src="https://user-gold-cdn.xitu.io/2019/12/6/16eda5bc47ea21fd?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1"
          alt="" class="w-9 rounded-full">
        <div class="ml-3 text-info-lighter">alphardex</div>
      </div>
      <i class="fas fa-question-circle text-secondary text-lg cursor-pointer"></i>
    </div>
  </div>
  <div class="dark-mode mx-8 my-4 h-full bg-primary flex flex-col justify-between px-6 py-12 rounded overflow-hidden">
    <div>
      <i class="fab fa-codepen mb-8 ml-3 text-secondary-darkest text-2xl cursor-pointer"></i>
      <div class="input-group">
        <div class="btn">
          <i class="icon fas fa-search"></i>
        </div>
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <ul class="menu mt-6">
        <li class="menu-item active"><i class="icon fas fa-user mr-5"></i>People</li>
        <li class="menu-item"><i class="icon fas fa-star mr-5"></i>Favourites</li>
        <li class="menu-item"><i class="icon fas fa-check-square mr-5"></i>Todos</li>
        <li class="menu-item"><i class="icon fas fa-compass mr-5"></i>Explore</li>
        <li class="divider"></li>
        <li class="menu-item"><i class="icon fas fa-image mr-5"></i>Images</li>
        <li class="menu-item"><i class="icon fas fa-bell mr-5"></i>Notification</li>
      </ul>
    </div>
    <div class="flex justify-between items-center">
      <div class="flex items-center cursor-pointer">
        <img
          src="https://user-gold-cdn.xitu.io/2019/12/6/16eda5bc47ea21fd?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1"
          alt="" class="w-9 rounded-full">
        <div class="ml-3 text-info-lighter">alphardex</div>
      </div>
      <i class="fas fa-question-circle text-secondary text-lg cursor-pointer"></i>
    </div>
  </div>
  <div class="blue-mode mx-8 my-4 h-full bg-primary flex flex-col justify-between px-6 py-12 rounded overflow-hidden">
    <div>
      <i class="fab fa-codepen mb-8 ml-3 text-secondary-darkest text-2xl cursor-pointer"></i>
      <div class="input-group">
        <div class="btn">
          <i class="icon fas fa-search"></i>
        </div>
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <ul class="menu mt-6">
        <li class="menu-item active"><i class="icon fas fa-user mr-5"></i>People</li>
        <li class="menu-item"><i class="icon fas fa-star mr-5"></i>Favourites</li>
        <li class="menu-item"><i class="icon fas fa-check-square mr-5"></i>Todos</li>
        <li class="menu-item"><i class="icon fas fa-compass mr-5"></i>Explore</li>
        <li class="divider"></li>
        <li class="menu-item"><i class="icon fas fa-image mr-5"></i>Images</li>
        <li class="menu-item"><i class="icon fas fa-bell mr-5"></i>Notification</li>
      </ul>
    </div>
    <div class="flex justify-between items-center">
      <div class="flex items-center cursor-pointer">
        <img
          src="https://user-gold-cdn.xitu.io/2019/12/6/16eda5bc47ea21fd?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1"
          alt="" class="w-9 rounded-full">
        <div class="ml-3 text-info-lighter">alphardex</div>
      </div>
      <i class="fas fa-question-circle text-secondary text-lg cursor-pointer"></i>
    </div>
  </div>
</div>